import React, { useState } from 'react';
import styles from './MultiSelect.module.less';
import { type MultiSelectProps, MultiSelect } from '@mantine/core';
import { NImage } from '@/components/Uikit';
import langDownImg from '@/assets/images/public/arrow-down.png';
import classNames from 'classnames';
import { mergeClassNames } from '../tools';
import { NRequireLabel } from '@/components/Uikit';

// interface ExtendedSwitchProps extends SwitchProps {}
export const NMultiSelect = React.memo(
  ({ className, required, withAsterisk, label, ...restProps }: MultiSelectProps) => {
    const [dropDownOpened, setDropDownOpened] = useState(false);
    {
      return (
        <>
          {label ? <NRequireLabel required={required} withAsterisk={withAsterisk} label={label} /> : ''}
          <MultiSelect
            className={classNames(className)}
            classNames={mergeClassNames(styles, restProps.classNames)}
            onDropdownOpen={() => {
              setDropDownOpened(true);
              restProps.onDropdownOpen?.();
            }}
            onDropdownClose={() => {
              setDropDownOpened(false);
              restProps.onDropdownClose?.();
            }}
            comboboxProps={{
              transitionProps: { transition: 'pop', duration: 300 },
              ...restProps.comboboxProps,
            }}
            rightSection={
              <NImage
                className={classNames('flex-none w-6 h-6 mx-10', 'origin-center transition-transform rotate-0', {
                  '!rotate-180': dropDownOpened,
                })}
                src={langDownImg}
              />
            }
            {...restProps}
          />
        </>
      );
    }
  },
);
